<template>
    <el-form
        ref="formRef"
        :rules="formRules"
        :model="formData"
        :size="'default'"
        label-width="120px"
        status-icon
    >
        <el-form-item label="菜单名称" prop="label">
            <el-input v-model="formData.label"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型" prop="type">
            <el-radio-group v-model="formData.type">
                <el-radio :label="'menu'">菜单</el-radio>
                <el-radio :label="'menuitem'">菜单项</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="VUE组件名称" prop="component_name">
            <el-input v-model="formData.component_name"></el-input>
        </el-form-item>
        <el-form-item label="VUE组件路径" prop="component_path">
            <el-input v-model="formData.component_path"></el-input>
        </el-form-item>
        <el-form-item label="菜单ICON" prop="component_icon">
            <el-input v-model="formData.component_icon"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="orderno">
            <el-input-number v-model="formData.orderno" />
        </el-form-item>
        <el-form-item>
            <el-button-group>
                <el-button type="primary" @click="onSave"> 保存 </el-button>
                <el-button type="primary" @click="onCancel"> 取消 </el-button>
            </el-button-group>
        </el-form-item>
    </el-form>
</template>
<script setup lang="ts" name="MenuUpdate">
import { ref, reactive, onMounted, toRaw } from 'vue';
import { FormInstance, FormRules } from 'element-plus';
import { isNil, omit } from 'lodash';
import { Request } from '@/app/request';
import { MenuModel } from '@/common/types/model';

const props = defineProps<{
    operType: '新增子菜单' | '新增菜单' | '修改';
    menu?: MenuModel;
}>();

const emit = defineEmits<{
    close: [
        type: 'create' | 'createsub' | 'update' | 'close',
        menu?: MenuModel,
    ];
}>();

const formRef = ref<FormInstance>();
const formData = reactive<MenuModel>({});
const formRules = reactive<FormRules>({
    label: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
    type: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
});

onMounted(() => {
    if (!isNil(props.menu)) {
        Object.assign(formData, props.menu);
    }
});
const update = async () => {
    const req = new Request('菜单修改', omit(formData, 'children'));
    const r = await req.post();
    if (r.code > 100) {
        emit('close', 'update', toRaw(formData));
    }
};
const createsub = async () => {
    const req = new Request('菜单增加', omit(formData, 'children'));
    const r = await req.post();
    if (r.code > 100) {
        emit('close', 'createsub', r.obj);
    }
};
const create = async () => {
    const req = new Request('菜单增加', omit(formData, 'children'));
    const r = await req.post();
    if (r.code > 100) {
        emit('close', 'create', r.obj);
    }
}
const onSave = async () => {
    const validResult = await formRef.value?.validate();
    if (validResult) {
        if (props.operType === '修改') {
            update();
        } else if (props.operType === '新增子菜单') {
            createsub();
        } else {
            create();
        }
    }
};
const onCancel = () => {
    emit('close', 'close');
};
</script>
<style lang="scss" scoped></style>
